<script setup>
import stopAppIcon from './head_icon/StopAppIcon.vue'
import amplifyApp from './head_icon/AmplifyApp.vue'
import retractApp from './head_icon/RetractApp.vue'

import { StopApp, AmplifyApp, RetractApp } from '../event/event'
</script>

<template>
  <div class="head-box">
    <div class="head-app-menu"></div>
    <div class="head-app-icon">
      <div class="app-icon-itme" @click="RetractApp">
        <retractApp />
      </div>
      <div class="app-icon-itme" @click="AmplifyApp">
        <amplifyApp />
      </div>
      <div class="app-icon-itme" @click="StopApp">
        <stopAppIcon />
      </div>
    </div>
  </div>
</template>

<style scoped>
.head-box {
  width: 100%;
  height: 30px;
  border-radius: 10px;

  /* 用户不能选择 */
  user-select: none;
  /* 能拖动窗口 */
  -webkit-app-region: drag;

  display: flex;
}

.head-app-menu {
  flex: 7;
}

.head-app-icon {
  width: 130px;
  -webkit-app-region: no-drag;

  display: flex;
  align-items: center;
  justify-content: space-around;
}
.head-app-icon .app-icon-itme {
  flex: 1;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.head-app-icon .app-icon-itme:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>
